
<template>
  <div>
<!--    不刷新页面跳转-->
    <RouterLink to="/button">跳转到Element-Plus-Button.vue</RouterLink>
  </div>

<!--    浏览器打开发现没有用贴边，原因外面有一个body,然而body有一个margin-->
    <div style="font-size:20px; font-weight: bold; color: red; text-decoration: underline; font-style: italic; margin-bottom: 20px;">欢迎使用View</div>


  <div style="font-size:30px;margin-bottom: 20px;">
    {{ a }}
    {{ b }}
  </div>

  <div style="font-size:30px;margin-bottom: 20px;">
<!--    {{data}}-->
    {{ data.a }}
    {{ data.b }}
    {{ data.c }}
    {{ data.d }}
  </div>

  <div style="font-size:30px;margin-bottom: 20px;">
      <input v-model="data.a"/>
<!--  双向绑定：用户在输入的是时候data.a同时改变-->
  </div>
  <div style="font-size:30px;margin-bottom: 20px;">
      <span style="background-color: blue" v-if="data.name==='急先锋'">急先锋</span>
      <span style="background-color: red" v-if="data.name==='霹雳火'">霹雳火</span>
      <span style="background-color: yellow" v-else>力霸天</span>
  </div>
  <!--    把三个数字放到不同div-->
  <div style="display: flex">
      <div style="width: 300px;
       height: 300px;
        background-color: green;
         margin-right: 10px;
         text-align: center;
         font-size: 20px;"
         v-for="item in data.arr" @click="show(item)">{{item}}</div>

      <div>
        <select style="width: 300px;">
          <option v-for="item in data.fruits">{{item}}</option>
        </select>
      </div>
  </div>
  <div>
<!--    原生方法-->
<!--    <button v-on:click="click">点我加好运</button>-->
<!--    简便方式-->
    <button @click="click">点我加好运</button>
  </div>

  <div>
    <div :style="data.box"></div>
  </div>
  <div>
    <img :src="data.img" alt="">
  </div>


</template>
<script setup>
import {reactive,ref,onMounted} from "vue";


import request from "@/utils/request.js";



const a = ref(1)
const b = ref("周维泳真的很帅")

const data = reactive({
  a:123,
  b:"周维泳真的很骚哦",
  c:"123124",
  d:false,
  name: "力霸天",
  arr:[1,2,3],
  fruits:["苹果","香蕉","橘子"],
  box:{
    width:"100px",
    height:"100px",
    backgroundColor:"red"
  },
  img:'https://lf-flow-web-cdn.doubao.com/obj/flow-doubao/samantha/logo-icon-white-bg.png',
  adminList:[]
})
request.get('/admin/selectAll').then(res=>{
  console.log(res)
  data.adminList = res.data
  console.log(data.adminList)
})
const click = () => {
  alert("好运+1")
}
const show =(value) => {
  alert(value)
}
onMounted(() => {
  console.log("页面加载完毕")
})

</script>